<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 网络来源图片 要是通过img标签显示 需要添加mate标签 -->
  <meta name="referrer" content="never">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/cart.css">
</head>
<body>
  <h1>我是一个购物车页面</h1>

  <div class="container"></div>

  
  <script src="../tools/jquery.min.js"></script>
  <script>
    // 调用函数 动态渲染生成页面
    setPage();

    // 给父级标签添加点击事件 通过事件委托完成函数程序的执行
    $('.container').click(function(e){
      // 获取 cart数据
      const cart = JSON.parse( localStorage.cart );

      // 如果点击的是 全选按钮
      if( e.target.getAttribute('name') === 'all' ){
        // 设定 localStorage 中 所有数据单元 buy属性值
        cart.forEach(item=>{
          item.buy = e.target.checked;
        })

      // 如果点击的是 其他input标签  
      }else if( e.target.getAttribute('name') === 'other' ){
        // 修改索引下标 和 点击标签索引下标相同的 数组中的数据
        cart[ e.target.getAttribute('index')-0 ].buy = e.target.checked;

      // 如果点击的是 删除标签
      }else if( e.target.getAttribute('name') === 'del' ){
        // 从点击标签 索引下标 开始 数组中删除 1个单元
        cart.splice( e.target.getAttribute('index')-0 , 1 );

      // 如果点击的是 - 标签
      }else if( e.target.getAttribute('name') === '减' ){
        // 给索引下标相同的数据 num属性值 累减1
        cart[ e.target.getAttribute('index')-0 ].num--; 

      // 如果点击的是 + 标签
      }else if( e.target.getAttribute('name') === '加' ){
        // 给索引下标相同的数据 num属性值 累减1
        cart[ e.target.getAttribute('index')-0 ].num++; 

      }


      // 新数组 设定 给 localStorage.cart 存储
      // cart数组要转化为 json字符串
      localStorage.cart = JSON.stringify( cart );
      // 调用函数 动态渲染生成页面
      setPage();
    })


    function setPage(){
      // 定义变量 存储 种类 件数 金额
      let type = 0;
      let number = 0;
      let money = 0;

      // 获取 本地存储数据信息
      let cart = localStorage.cart;

      if( cart === undefined ){
        // 没有 创建 购物车
        // 生成 对应的 提示信息
        $('.container').html('<h1>您还没有创建购物车,请您先去创建</h1>');

      }else{
        // 定义变量 存储 结果
        let bool = true;

        // 有 购物车数据
        cart = JSON.parse( cart );

        if( cart.length === 0 ){
          // 购物车数组是一个空数组
          // 生成对应的提示信息
          $('.container').html('<h1>您的购物车已经被清空,请您再去添加商品</h1>');

        }else{
          // 有 数据信息 动态生成页面
          // 动态生成的部分 分为 3部分
          // 起始部分 起始标签 至  ul标签的 起始标签
          // 中间部分 根据 数组 循环遍历生成的 li标签
          // 结束部分 ul标签的结束标签 到最后

          // 起始部分
          let str = `
            <div class="panel panel-info ">
              <div class="panel-body bg-info">
                <div class="checkbox">
                  <label>
                    <input name="all" type="checkbox" value="">
                    全选
                  </label>
                </div>
              </div>
              <div class="panel-footer">
                <ul class="cart-list">`;

          // 中间部分
          cart.forEach( (item , key)=>{
            // 如果 有 商品 选中状态是 false 给 变量bool 也赋值false
            if( item.buy === false ){ 
              bool = false 
            }else{
              // 如果 当前商品 是 选中状态
              // 计算 购买商品种类 简述 金额
              
              // 种类 累加1
              type++;
              // 件数 累加 商品信息中的num
              number += item.num;
              // 金额 累加 单价 * 件数
              money += item.goods_price * item.num;
            }

            str += `
              <li class="cart-item">
                <div class="left">
                  <input name="other" index="${key}" type="checkbox" ${item.buy ? 'checked' : ''}>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="${item.goods_small_logo}" alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                        <button name="减" index="${key}" type="button" class="btn btn-default" ${ item.num === 1 ? 'disabled' : '' }>-</button>
                        <button type="button" class="btn btn-default" disabled>${item.num}</button>
                        <button name="加" index="${key}" type="button" class="btn btn-default" ${ item.num == item.goods_number ? 'disabled' : '' }>+</button>
                      </div>
                      <button name="del" index="${key}" class="del btn btn-danger">我不要了</button>

                    </div>
                  </div>
                </div>
              </li>
            `;
          })

          // 结束部分
          // str += `
          //       </ul>
          //     </div>
          //     <div>
          //       <h1>您一共购买了 ${type} 种商品</h1>
          //       <h1>您一共购买了 ${number} 件商品</h1>
          //       <h1>您需要支付 ${money.toFixed(2)} 元</h1>
          //     </div>
          //   </div>
          // `;

          str += `
              </ul>
          </div>
            <div class="account">
              <div class="checkbox">
                <label>
                  <input name="all" type="checkbox" value="">
                  全选
                </label>
              </div>
              <div class="acc">
                <div class="acc1">已选商品${number}件</div>
                <div class="acc2">合计（不含运费）：${money.toFixed(2)}元</div>
                <button>结算</button>
              </div>
            </div>
        </div>
          `;
          // 将 字符串写入 标签中
          $('.container').html(str);
          // 根据 bool 变量储存的数据 设定 全选按钮 选中状态
          $('[name="all"]').prop('checked' , bool);

        }

      }

    }
  </script>


  <script>
    /*
      动态渲染生成
        1 有没有 创建 购物车 
          也就是 localStorage.cart 结果是 undefined
          生成 购物车 没有创建提示信息

        2 创建 了 购物车
          也就是 localStorage.cart 结果是 json字符串
          还原为 对应的 数据结构 也就是 数组 中 存储对象

          情况1: 数组是一个空数组 
            生成 购物车 数据是空的 结果
          情况2: 数组不是一个空数组
            对应生成页面内容

      点击效果
        1 点击全选按钮
          给 localStorage中 每一个数据对象 中 buy属性的属性值
          设定的 和 全选按钮 checked属性值 一致


      总结:
        数据交互的 基本 套路
          1 获取数据 动态渲染生成页面

          2 通过事件委托 给动态渲染生成页面的标签 添加事件
            通过操作 获取 前端页面中 对应的数据数值

          3 应该是 发送请求 携带 参数 修改数据库存储数据

          4 修改后 数据库 会返回结果数据数值

          5 根据新的响应结果 再次动态渲染生成页面

      当前是 修改 本地的localStorage数据 
      可以通过 索引下标 找到 数组中 对应的数据 修改对应的数值

      实际项目中 一定是 获取 id主键值 
      向 数据库 发送请求
      修改数据库中 这条 对应的数据
          
    
    */


  </script>
</body>
</html>

<!--  

            
            
              



-->
